<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tables</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>

    <!-- Bootstrap Core CSS -->
    <link href="commons/bootstrap-3.3.7/css/bootstrap.css" rel='stylesheet' type='text/css'/>

    <!-- Custom CSS -->
    <link href="css/style.css" rel='stylesheet' type='text/css'/>

    <!-- font-awesome icons CSS -->
    <link href="css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome icons CSS -->

    <!-- side nav css file -->
    <link href='css/SidebarNav.min.css' media='all' rel='stylesheet' type='text/css'/>
    <!-- side nav css file -->

    <!-- js-->
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/modernizr.custom.js"></script>

    <!--webfonts-->
    <link href="http://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext"
          rel="stylesheet">
    <!--//webfonts-->

    <!-- Metis Menu -->
    <script src="js/metisMenu.min.js"></script>
    <script src="js/custom.js"></script>
    <link href="css/custom.css" rel="stylesheet">
    <!--//Metis Menu -->

    <!--bootstrap-table-->
    <script src="commons/bootstrap-table-1.13.1/bootstrap-table.css"></script>
    <script src="commons/bootstrap-table-1.13.1/bootstrap-table.js"></script>
    <script src="commons/bootstrap-table-1.13.1/locale/bootstrap-table-zh-CN.js"></script>
</head>
<body class="cbp-spmenu-push">
<div class="main-content">
   <!-- <div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
        &lt;!&ndash;left-fixed -navigation&ndash;&gt;
        <aside class="sidebar-left">
            <nav class="navbar navbar-inverse">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse"
                            aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <h1><a class="navbar-brand" href="index.html"><span class="fa fa-area-chart"></span> Glance<span
                            class="dashboard_text">Design dashboard</span></a></h1>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="sidebar-menu">
                        <li class="header">MAIN NAVIGATION</li>
                        <li class="treeview">
                            <a href="index.html">
                                <i class="fa fa-dashboard"></i> <span>Dashboard</span>
                            </a>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-laptop"></i>
                                <span>Components</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="grids.html"><i class="fa fa-angle-right"></i> Grids</a></li>
                                <li><a href="media.html"><i class="fa fa-angle-right"></i> Media Css</a></li>
                            </ul>
                        </li>
                        <li class="treeview">
                            <a href="charts.html">
                                <i class="fa fa-pie-chart"></i>
                                <span>Charts</span>
                                <span class="label label-primary pull-right">new</span>
                            </a>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-laptop"></i>
                                <span>UI Elements</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="general.html"><i class="fa fa-angle-right"></i> General</a></li>
                                <li><a href="icons.html"><i class="fa fa-angle-right"></i> Icons</a></li>
                                <li><a href="buttons.html"><i class="fa fa-angle-right"></i> Buttons</a></li>
                                <li><a href="typography.html"><i class="fa fa-angle-right"></i> Typography</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="widgets.html">
                                <i class="fa fa-th"></i> <span>Widgets</span>
                                <small class="label pull-right label-info">08</small>
                            </a>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-edit"></i> <span>Forms</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="forms.html"><i class="fa fa-angle-right"></i> General Forms</a></li>
                                <li><a href="validation.html"><i class="fa fa-angle-right"></i> Form Validations</a>
                                </li>
                            </ul>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-table"></i> <span>Tables</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="tables.html"><i class="fa fa-angle-right"></i> Simple tables</a></li>
                            </ul>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-envelope"></i> <span>Mailbox</span>
                                <i class="fa fa-angle-left pull-right"></i>
                                <small class="label pull-right label-info1">08</small>
                                <span class="label label-primary1 pull-right">02</span></a>
                            <ul class="treeview-menu">
                                <li><a href="inbox.html"><i class="fa fa-angle-right"></i> Mail Inbox</a></li>
                                <li><a href="compose.html"><i class="fa fa-angle-right"></i> Compose Mail </a></li>
                            </ul>
                        </li>
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-folder"></i> <span>Examples</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="login.html"><i class="fa fa-angle-right"></i> Login</a></li>
                                <li><a href="signup.html"><i class="fa fa-angle-right"></i> Register</a></li>
                                <li><a href="404.html"><i class="fa fa-angle-right"></i> 404 Error</a></li>
                                <li><a href="500.html"><i class="fa fa-angle-right"></i> 500 Error</a></li>
                                <li><a href="blank-page.html"><i class="fa fa-angle-right"></i> Blank Page</a></li>
                            </ul>
                        </li>
                        <li class="header">LABELS</li>
                        <li><a href="#"><i class="fa fa-angle-right text-red"></i> <span>Important</span></a></li>
                        <li><a href="#"><i class="fa fa-angle-right text-yellow"></i> <span>Warning</span></a></li>
                        <li><a href="#"><i class="fa fa-angle-right text-aqua"></i> <span>Information</span></a></li>
                    </ul>
                </div>
                &lt;!&ndash; /.navbar-collapse &ndash;&gt;
            </nav>
        </aside>
    </div>-->
    <!--left-fixed -navigation-->

    <!-- header-starts -->
    <!--  <div class="sticky-header header-section ">
          <div class="header-left">

              &lt;!&ndash;toggle button start&ndash;&gt;
              <button id="showLeftPush"><i class="fa fa-bars"></i></button>
              &lt;!&ndash;toggle button end&ndash;&gt;
              <div class="profile_details_left">&lt;!&ndash;notifications of menu start &ndash;&gt;
                  <ul class="nofitications-dropdown">
                      <li class="dropdown head-dpdn">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">4</span></a>
                          <ul class="dropdown-menu">
                              <li>
                                  <div class="notification_header">
                                      <h3>You have 3 new messages</h3>
                                  </div>
                              </li>
                              <li><a href="#">
                                  <div class="user_img"><img src="images/1.jpg" alt=""></div>
                                  <div class="notification_desc">
                                      <p>Lorem ipsum dolor amet</p>
                                      <p><span>1 hour ago</span></p>
                                  </div>
                                  <div class="clearfix"></div>
                              </a></li>
                              <li class="odd"><a href="#">
                                  <div class="user_img"><img src="images/4.jpg" alt=""></div>
                                  <div class="notification_desc">
                                      <p>Lorem ipsum dolor amet </p>
                                      <p><span>1 hour ago</span></p>
                                  </div>
                                  <div class="clearfix"></div>
                              </a></li>
                              <li><a href="#">
                                  <div class="user_img"><img src="images/3.jpg" alt=""></div>
                                  <div class="notification_desc">
                                      <p>Lorem ipsum dolor amet </p>
                                      <p><span>1 hour ago</span></p>
                                  </div>
                                  <div class="clearfix"></div>
                              </a></li>
                              <li>
                                  <div class="notification_bottom">
                                      <a href="#">See all messages</a>
                                  </div>
                              </li>
                          </ul>
                      </li>
                      <li class="dropdown head-dpdn">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">4</span></a>
                          <ul class="dropdown-menu">
                              <li>
                                  <div class="notification_header">
                                      <h3>You have 3 new notification</h3>
                                  </div>
                              </li>
                              <li><a href="#">
                                  <div class="user_img"><img src="images/4.jpg" alt=""></div>
                                  <div class="notification_desc">
                                      <p>Lorem ipsum dolor amet</p>
                                      <p><span>1 hour ago</span></p>
                                  </div>
                                  <div class="clearfix"></div>
                              </a></li>
                              <li class="odd"><a href="#">
                                  <div class="user_img"><img src="images/1.jpg" alt=""></div>
                                  <div class="notification_desc">
                                      <p>Lorem ipsum dolor amet </p>
                                      <p><span>1 hour ago</span></p>
                                  </div>
                                  <div class="clearfix"></div>
                              </a></li>
                              <li><a href="#">
                                  <div class="user_img"><img src="images/3.jpg" alt=""></div>
                                  <div class="notification_desc">
                                      <p>Lorem ipsum dolor amet </p>
                                      <p><span>1 hour ago</span></p>
                                  </div>
                                  <div class="clearfix"></div>
                              </a></li>
                              <li>
                                  <div class="notification_bottom">
                                      <a href="#">See all notifications</a>
                                  </div>
                              </li>
                          </ul>
                      </li>
                      <li class="dropdown head-dpdn">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">8</span></a>
                          <ul class="dropdown-menu">
                              <li>
                                  <div class="notification_header">
                                      <h3>You have 8 pending task</h3>
                                  </div>
                              </li>
                              <li><a href="#">
                                  <div class="task-info">
                                      <span class="task-desc">Database update</span><span class="percentage">40%</span>
                                      <div class="clearfix"></div>
                                  </div>
                                  <div class="progress progress-striped active">
                                      <div class="bar yellow" style="width:40%;"></div>
                                  </div>
                              </a></li>
                              <li><a href="#">
                                  <div class="task-info">
                                      <span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
                                      <div class="clearfix"></div>
                                  </div>
                                  <div class="progress progress-striped active">
                                      <div class="bar green" style="width:90%;"></div>
                                  </div>
                              </a></li>
                              <li><a href="#">
                                  <div class="task-info">
                                      <span class="task-desc">Mobile App</span><span class="percentage">33%</span>
                                      <div class="clearfix"></div>
                                  </div>
                                  <div class="progress progress-striped active">
                                      <div class="bar red" style="width: 33%;"></div>
                                  </div>
                              </a></li>
                              <li><a href="#">
                                  <div class="task-info">
                                      <span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
                                      <div class="clearfix"></div>
                                  </div>
                                  <div class="progress progress-striped active">
                                      <div class="bar  blue" style="width: 80%;"></div>
                                  </div>
                              </a></li>
                              <li>
                                  <div class="notification_bottom">
                                      <a href="#">See all pending tasks</a>
                                  </div>
                              </li>
                          </ul>
                      </li>
                  </ul>
                  <div class="clearfix"> </div>
              </div>
              &lt;!&ndash;notification menu end &ndash;&gt;
              <div class="clearfix"> </div>
          </div>
          <div class="header-right">


              &lt;!&ndash;search-box&ndash;&gt;
              <div class="search-box">
                  <form class="input">
                      <input class="sb-search-input input__field&#45;&#45;madoka" placeholder="Search..." type="search" id="input-31" />
                      <label class="input__label" for="input-31">
                          <svg class="graphic" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
                              <path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
                          </svg>
                      </label>
                  </form>
              </div>&lt;!&ndash;//end-search-box&ndash;&gt;

              <div class="profile_details">
                  <ul>
                      <li class="dropdown profile_details_drop">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                              <div class="profile_img">
                                  <span class="prfil-img"><img src="images/2.jpg" alt=""> </span>
                                  <div class="user-name">
                                      <p>Admin Name</p>
                                      <span>Administrator</span>
                                  </div>
                                  <i class="fa fa-angle-down lnr"></i>
                                  <i class="fa fa-angle-up lnr"></i>
                                  <div class="clearfix"></div>
                              </div>
                          </a>
                          <ul class="dropdown-menu drp-mnu">
                              <li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li>
                              <li> <a href="#"><i class="fa fa-user"></i> My Account</a> </li>
                              <li> <a href="#"><i class="fa fa-suitcase"></i> Profile</a> </li>
                              <li> <a href="#"><i class="fa fa-sign-out"></i> Logout</a> </li>
                          </ul>
                      </li>
                  </ul>
              </div>
              <div class="clearfix"> </div>
          </div>
          <div class="clearfix"> </div>
      </div>-->
    <!-- //header-ends -->
    <!-- main content start-->
    <div id="page-wrapper">
        <div class="main-page">
            <div class="tables">
                <!--   <h2 class="title1">Tables</h2>
                   <div class="panel-body widget-shadow">
                       <h4>Basic Table:</h4>
                       <table class="table">
                           <thead>
                           <tr>
                               <th>#</th>
                               <th>First Name</th>
                               <th>Last Name</th>
                               <th>Username</th>
                           </tr>
                           </thead>
                           <tbody>
                           <tr>
                               <th scope="row">1</th>
                               <td>Mark</td>
                               <td>Otto</td>
                               <td>@mdo</td>
                           </tr>
                           <tr>
                               <th scope="row">2</th>
                               <td>Jacob</td>
                               <td>Thornton</td>
                               <td>@fat</td>
                           </tr>
                           <tr>
                               <th scope="row">3</th>
                               <td>Larry</td>
                               <td>the Bird</td>
                               <td>@twitter</td>
                           </tr>
                           </tbody>
                       </table>
                   </div>
                   <div class="bs-example widget-shadow" data-example-id="bordered-table">
                       <h4>Bordered Basic Table:</h4>
                       <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
                   </div>
                   <div class="bs-example widget-shadow" data-example-id="hoverable-table">
                       <h4>Hover Rows Table:</h4>
                       <table class="table table-hover"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
                   </div>-->

                <div class="bs-example widget-shadow" data-example-id="contextual-table">

                    <!--<table class="table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Column heading</th>
                            <th>Column heading</th>
                            <th>Column heading</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="active">
                            <th scope="row">1</th>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        <tr class="success">
                            <th scope="row">3</th>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        <tr>
                            <th scope="row">4</th>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        <tr class="info">
                            <th scope="row">5</th>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        <tr>
                            <th scope="row">6</th>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        <tr class="warning">
                            <th scope="row">7</th>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        <tr>
                            <th scope="row">8</th>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        <tr class="danger">
                            <th scope="row">9</th>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        </tbody>
                    </table>-->
                    <button id="add" class="btn-info">新增</button>
                    <button id="doSubmit" class="but-info">提交</button>
                    <h4>Colored Rows Table:</h4>
                    <table id="table" class="table table-bordered"></table>
                </div>
                <div class="table-responsive bs-example widget-shadow">
                    <h4>Responsive Table:</h4>
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Table heading</th>
                            <th>Table heading</th>
                            <th>Table heading</th>
                            <th>Table heading</th>
                            <th>Table heading</th>
                            <th>Table heading</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--footer-->
    <div class="footer">
        <p>Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://www.17sucai.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
        </p>
    </div>
    <!--//footer-->
</div>

<!-- side nav js -->
<script src='js/SidebarNav.min.js' type='text/javascript'></script>
<script>
    $('.sidebar-menu').SidebarNav()
</script>
<!-- //side nav js -->

<!-- Classie --><!-- for toggle left push menu script -->
<script src="js/classie.js"></script>
<script>
    var menuLeft = document.getElementById('cbp-spmenu-s1'),
        showLeftPush = document.getElementById('showLeftPush'),
        body = document.body;

    showLeftPush.onclick = function () {
        classie.toggle(this, 'active');
        classie.toggle(body, 'cbp-spmenu-push-toright');
        classie.toggle(menuLeft, 'cbp-spmenu-open');
        disableOther('showLeftPush');
    };

    function disableOther(button) {
        if (button !== 'showLeftPush') {
            classie.toggle(showLeftPush, 'disabled');
        }
    }
</script>
<!-- //Classie --><!-- //for toggle left push menu script -->

<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->

<!-- Bootstrap Core JavaScript -->
<script src="commons/bootstrap-3.3.7/js/bootstrap.js"></script>

</body>
</html>
<script>
    $(function () {
        var $table = $('#table');
        $('#table').bootstrapTable({
            clickEdit: true,

            //表格高度
            //height: getHeight(),
            //服务器数据的请求方式 'get' 或 'post'。
            //method: 'get',
            //url: '/MsgDealCenterAction/listData',//请求后台的URL
            //dataType: 'json',//服务器返回的数据类型。
            //classes: "table table-hover",
            striped: false, //设置为 true 会有隔行变色效果
            //设置为 true 会在表格底部显示分页条。
            toolbar: '#toolbar', //工具按钮用哪个容器
            cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属
            //paginationLoop: true,//设置为 true 启用分页条无限循环的功能
            //sidePagination: 'server',//设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置服务器数据地址（url）或者重写ajax方法
            pagination: true, //显示分页条
            pageNumber: 1,//初始化加载第一页，默认第一页
            pageSize: 10,//每页的记录行数
            pageList: [10,15,20, 50, 100],//可供选择的每页的行数
            paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
            paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
            sortable: true,//设置为false 将禁止所有列的排序。
            //sortName: 'insert_time',//设置默认排序为 name
            //sortOrder: "desc",//定义排序方式，'asc' 或者 'desc'。
            showRefresh: true,//是否显示刷新按钮
            showColumns: true,//是否显示内容列下拉框。
            showExport: true,//显示导出插件
            search: true,//是否显示右上角的搜索框
            showPaginationSwitch: true,     //隐藏/显示分页开关
            showToggle:true,//是否显示切换视图（table/card）按钮。
             //clickToSelect: true,//是否启用点击选中行
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType:'undefined',
            search: false,                      //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            //请求服务器数据
            /*queryParams: function queryParams(params){
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    sortName: params.sortName,
                    sortOrder: params.sortOrder
                };
                return param;
            },*/
                columns: [{
                checkbox: true,
            }, {
                field: 'id',
                title: 'Item ID'
            }, {
                field: 'name',
                title: 'Item Name',
                titleTooltip: 'this is Item Name'
            }, {
                field: 'price',
                title: 'Item Price'
            }],
            data: [{
                id: 1,
                name: 'Item 1',
                price: '$1'
            }, {
                id: 2,
                name: 'Item 2',
                price: '$2'
            }], onClickRow: function () {
                //alert("aaa");
            }, onClickCell: function (field, value, row, $element) {
                $element.attr('contenteditable', true);
                $element.blur(function () {
                    var index = $element.parent().data('index');
                    var tdValue = $element.html();

                    saveData(index, field, tdValue);
                })
            }
        })

        /**
         * 保存更新的数据
         * @param index
         * @param field
         * @param value
         */
        function saveData(index, field, value) {
            $table.bootstrapTable('updateCell', {
                index: index,       //行索引
                field: field,       //列名
                value: value        //cell值
            })
        }

        /**
         * 新增数据
         */
        $("#add").click(function () {
            var len = $('#table').bootstrapTable('getData').length;
            console.info("len:" + len);
            $('#table').bootstrapTable('insertRow', {
                index: len + 1,
                row: {
                    id: len + 1,
                    name: '',
                    price: ''
                }
            })
        })

        /**
         * 提交数据
         */
        $("#doSubmit").click(function(){
            var datas = $('#table').bootstrapTable('getSelections');
            if(datas == null || datas == ""){
                alert('请选择要提交的数据！');
            }else{
                console.info(JSON.stringify($('#table').bootstrapTable('getSelections')));
            }

        })
    })
</script>